import React, { Component } from 'react'
import { List,Grid } from 'antd-mobile'

export default class HeaderSelector extends Component{
    constructor(props) {
        super(props)
        this.avatars = []
        for (let i=0; i<9; i++){
            this.avatars.push({
                text: `avatar${i+1}`,
                icon: require(`../../assets/avatars/avatar${ i+1 }.png`).default
            })
        }
    }
    state = {
        icon: null
    }
    selectHeader = (el)=>{
        this.props.getHeader(el.text)
        this.setState({
            icon: el.icon
        })

    }
    
    render() { 
        let listHeader = '请选择头像:'

        if (this.state.icon){
            listHeader =
                <div>
                    头像: <img src = {this.state.icon} style={{width:'50px',height:'50px'}} alt=""/>
                </div>
        } else {
            listHeader = '请选择头像:'
        }
        return(
            <div>

                 <List renderHeader = { () => listHeader } >
                     <Grid
                        data={this.avatars}
                        columnNum={3}
                        renderItem={dataItem => (
                           <div style={{ padding: '12.5px' }}>
                               <img src={dataItem.icon} style={{ width: '75px', height: '75px' }} alt="" />
                               <div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
                                   <span>{dataItem.text}</span>
                                </div>
                           </div>
                        )}
                        onClick={ el => this.selectHeader(el) }
                     />
                 </List>
            </div>
        )
    }
}